<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="我负责的" name="first">
      <div class="app-container">
        <div class="filter-container">
      <el-select
          v-model="appliedListQuery.searchKey2"
          style="width: 200px"
          class="filter-item"
          placeholder="申报标题"
          @change="searchAndSortForParticipated"
        >
          <el-option
            v-for="item in declareOptionsOwne"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-input
          v-model="appliedListQuery.searchKey1"
          placeholder="项目名称"
          style="width: 200px"
          class="filter-item"
        />
        <el-select
          v-model="appliedListQuery.searchKey3"
          style="width: 200px"
          class="filter-item"
          placeholder="项目状态"
        >
          <el-option
            v-for="item in projectStatusOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchAndSortForParticipated"
        >
          查找
        </el-button>
      </div>
    <el-table
      :key="tableKey"
      v-loading="appliedListLoading"
      :data="appliedList"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
    <el-table-column label="申报标题" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDeclareName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="课题组" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectGroupName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDepartment }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人电话" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="立项报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectAttachFileName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="中期报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectMidReportName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/report/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="结项报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectFinalReportName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/report/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="当前处理" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectInformationCheckStatus !== "立项审查通过"? row.projectInformationCheckStatus : row.projectCheckStatus }}</span>
          </template>
        </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            size="mini"
            type="success"
            @click="$router.push(`/project/view/${row.id}`)"
          >
            查看
          </el-button>
          <el-button
            v-if="isEdit(row.projectStatus, row.projectInformationCheckStatus)"
            type="primary"
            size="mini"
            @click="$router.push(`/project/edit/${row.id}`)"
          >
            编辑
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button
            v-if="row.projectStatus === '项目未立项'"
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
          <el-button
              v-if="row.projectStatus === '项目进行中'"
              size="mini"
              type="success"
              @click="$router.push(`/project/change/create/${row.id}`)"
            >
              申请变更
              <i class="el-icon-edit"></i>
          </el-button>
          <el-button
              v-if="['提交项目中检报告', '项目中期报告审批驳回'].includes(row.projectCheckStatus)"
              size="mini"
              type="success"
              @click="$router.push(`/project/mid/report/${row.id}`)"
            >
              提交中期报告
              <i class="el-icon-edit"></i>
          </el-button>
          <el-button
              v-if="['提交项目结项报告', '项目结项报告审批驳回'].includes(row.projectCheckStatus)"
              size="mini"
              type="success"
              @click="$router.push(`/project/final/report/${row.id}`)"
            >
              提交结项报告
              <i class="el-icon-edit"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="appliedTotal > 0"
      :total="appliedTotal"
      :page.sync="appliedListQuery.pageIndex"
      :limit.sync="appliedListQuery.limit"
      @pagination="getList"
    />
  </div>
    </el-tab-pane>
    <el-tab-pane label="我参与的" name="second">
      <div class="app-container">
    <div class="filter-container">
      <el-select
          v-model="participatedListQuery.searchKey2"
          style="width: 200px"
          class="filter-item"
          placeholder="申报标题"
          @change="searchAndSortForParticipated"
        >
          <el-option
            v-for="item in declareOptionsParticipate"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-input
          v-model="participatedListQuery.searchKey1"
          placeholder="项目名称"
          style="width: 200px"
          class="filter-item"
        />
        <el-select
          v-model="participatedListQuery.searchKey3"
          style="width: 200px"
          class="filter-item"
          placeholder="项目状态"
        >
          <el-option
            v-for="item in projectStatusOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchAndSortForParticipated"
        >
          查找
        </el-button>
      </div>
      <el-table
        :key="participatedTableKey"
        v-loading="participatedListLoading"
        :data="participatedList"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
      <el-table-column label="申报标题" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDeclareName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="课题组" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectGroupName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectDepartment }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人电话" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectOwnerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="立项报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectAttachFileName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="中期报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectMidReportName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/report/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="结项报告书" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.projectFinalReportName"
              size="mini"
              type="primary"
              @click="$router.push(`/project/report/view/${row.id}`)"
            >
              <i class="el-icon-document" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="当前处理" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.projectInformationCheckStatus !== "立项审查通过"? row.projectInformationCheckStatus : row.projectCheckStatus }}</span>
          </template>
        </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            size="mini"
            type="success"
            @click="$router.push(`/project/view/${row.id}`)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="participatedTotal > 0"
      :total="participatedTotal"
      :page.sync="participatedListQuery.pageIndex"
      :limit.sync="participatedListQuery.limit"
      @pagination="getList"
    />
  </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { searchThree } from "@/utils";
import Pagination from "@/components/Pagination";
import { fetchProjectsByUserId, deleteProject } from '@/api/project';
import projectStatus from "@/data/projectStatus";
import { mapGetters } from "vuex";

export default {
  name: "projectList",
  components: { Pagination },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      tableKey: 0,
      participatedTableKey: 0,
      totalAppliedList: null,
      totalParticipatedList: null,
      appliedList: null,
      participatedList: null,
      appliedTotal: 0,
      participatedTotal: 0,
      appliedListLoading: true,
      participatedListLoading: true,
      declareOptionsOwne: [],
      declareOptionsParticipate: [],
      activeName: 'first',
      projectStatusOptions: projectStatus,
      appliedListQuery: {
        pageIndex: 1,
        limit: 10,
        searchField1: "projectName",
        searchKey1: "",
        searchField2: "projectDeclareName",
        searchKey2: "",
        searchField3: "projectStatus",
        searchKey3: "",
      },
      participatedListQuery: {
        pageIndex: 1,
        limit: 10,
        searchField1: "projectName",
        searchKey1: "",
        searchField2: "projectDeclareName",
        searchKey2: "",
        searchField3: "projectStatus",
        searchKey3: "",
      },
    };
  },
  computed: {
    ...mapGetters(["id"])
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.appliedListLoading = true;
      this.participatedListLoading = true;
      fetchProjectsByUserId(this.id).then((res) => {
        this.totalAppliedList = res.data.applied;
        this.totalParticipatedList = res.data.participated;
        this.handleFilter();
        this.handleParticipatedFilter();

        this.appliedListLoading = false;
      this.participatedListLoading = false;
      });
    },
    getOwneDeclareOptions() {
        const options = [];
        this.totalAppliedList.forEach(item => {
            options.push({key: item.projectDeclareName, label: item.projectDeclareName})
        });
        this.declareOptionsOwne = [...new Set(options)];
      },
    getParticipateDeclareOptions() {
        const options = [];
        this.totalParticipatedList.forEach(item => {
            options.push({key: item.projectDeclareName, label: item.projectDeclareName})
        });
        this.declareOptionsParticipate = [...new Set(options)];
      },
    handleFilter() {
      const result=searchThree(this.totalAppliedList, this.appliedListQuery);
      this.appliedList = result.data;
      this.appliedTotal=result.total;
    },
    handleParticipatedFilter() {
      const result=searchThree(this.totalParticipatedList, this.participatedListQuery);
      this.participatedList = result.data;
      this.participatedTotal=result.total;
    },
    searchAndSort() {
      this.appliedListQuery.pageIndex = 1;
      this.handleFilter();
    },
    searchAndSortForParticipated() {
      this.participatedListQuery.pageIndex = 1;
      this.handleParticipatedFilter();
    },
    isEdit(status, infoCheckStatus) {
      if ((['项目未立项'].includes(status) && ['科研处立项预审中', '科研处立项预审驳回', '专家立项伦理审查驳回', '领导立项总审查驳回',
       '财务立项审查驳回'].includes(infoCheckStatus))) {
        return true;
      }
      return false;
    },
    handleDelete(row, index) {
      this.$confirm(`是否确定删除 "${row.projectName}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        //请求接口
        deleteProject(row.id)
          .then((res) => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新获取
              this.getList();
            } else {
              this.$message({
                message: "项目删除失败",
                type: "error",
              });
            }
          })
          .catch((err) => {
            this.$message({
              message: "项目删除失败",
              type: "error",
            });
          });
      });
    },
  },
};
</script>
